<template>
  <div class="mainoc">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_tile boxdq">
          <div class="main_tile_l marginLeft0"><em></em>订单详情</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li>
              订单号：
              <span>DD202004284582310025</span>
            </li>
            <li>
              下单时间：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li>
              送货时间：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li>
              订单状态：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li>
              支付状态：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li>
              单位名称：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li class="main_w50">
              收货信息：
              <span>江西省南昌市红谷滩新区绿地双子塔A2座21楼</span>
            </li>
            <li class="main_w100">
              备注：
              <span
                >江西省南昌市红谷滩新区绿地双子塔A2座21楼江西省南昌市红谷滩新区绿地双子塔A2座21楼江西省南昌市红谷滩新区绿地双子塔A2座21楼江西省南昌市红谷滩新区绿地双子塔A2座21楼江西省南昌市红谷滩新区绿地双子塔A2座21楼</span
              >
            </li>
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
        </div>
        <div class="main_table marginTop0">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" prop="userId" width="100">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="图片" width="100" class-name="main_hei">
              <template slot-scope="scope">
                <div class="demo-image__error mainor_im">
                  <el-image
                    fit="fill"
                    :src="scope.row.url"
                    :preview-src-list="srcList"
                    :z-index="scope.row.$index"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="userId"
              width="120"
              class-name="main_hei"
            />
            <el-table-column
              label="描述"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="下单单位"
              prop="userNickname"
              width="120"
              class-name="main_hei"
            />
            <el-table-column
              label="单价"
              width="120"
              prop="price"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-input
                  :ref="'price' + scope.$index"
                  v-model="scope.row.price"
                  placeholder="单价"
                  class="wid80"
                  @blur.prevent="
                    (val) => {
                      inputBlur(val, scope.$index, 'price');
                    }
                  "
                  @keyup.enter.native="$event.target.blur"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="折扣率"
              prop="userNickname"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <div class="main_link">
                  <el-link type="danger">{{ scope.row.userNickname }}</el-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="市场价"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="协议价"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="下单小计"
              prop="userNickname"
              width="120"
              class-name="main_hei"
            />
            <el-table-column
              label="现有库存"
              prop="userNickname"
              width="120"
              class-name="main_hei"
            />
            <el-table-column
              label="发货数量"
              prop="num"
              width="120"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-input
                  :ref="'sorting' + scope.$index"
                  v-model="scope.row.num"
                  placeholder="发货数量"
                  class="wid80"
                  @blur.prevent="
                    (val) => {
                      inputBlur(val, scope.$index, 'sorting');
                    }
                  "
                  @keyup.enter.native="$event.target.blur"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="100"
              class-name="main_hei"
            >
              <template>
                <el-link type="success">保存</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mainoc_jg">
          合计品种：{{ list.length }}件
          <span>合计金额：123456.11</span>
        </div>
        <div class="main_tile box marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>订单流水</div>
          <div class="mainoc_xs" @click="xsdata = !xsdata">
            <i :class="[{ on: xsdata }, ' el-icon-arrow-down']"></i>
          </div>
        </div>
        <div class="main_table" style="min-height: 200px">
          <el-table
            ref="multipleTable1"
            v-loading="listLoading"
            v-if="xsdata"
            :data="listxs"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column
              label="时间"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="金额"
              prop="userNickname"
              class-name="main_hei"
            />
            <el-table-column
              label="备注"
              prop="userNickname"
              class-name="main_hei"
            />
          </el-table>
        </div>
        <div class="mainua_an marginLeft10 marginBottom10">
          <el-button type="primary" @click="preservation()" v-repeatClick
            >保存</el-button
          >
          <el-button @click="$router.back(-1)">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  category_list,
  category_use,
} from "@/api/commodity/commodityClassification";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 列表数据
      list: [
        {
          userId: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          userNickname: "窘况冻解冻解冻解冻解冻解冻解冻解冻解冻",
          num: "2.2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 2,
          url:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=966242839,2938392410&fm=26&gp=0.jpg",
          userNickname: "窘况冻解冻解冻解冻解冻解冻解冻解冻解冻",
          num: "2.2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 3,
          userNickname: "窘况",
          num: "1",
          price: "2.2",
          url: "",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
        {
          userId: 4,
          url: "",
          userNickname: "窘况",
          num: "2",
          price: "2.2",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
      ],
      listxs: [
        {
          userId: 1,
          userNickname: "窘况冻解冻解冻解冻解冻解冻解冻解冻解冻",
          userLevel: "解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻解冻",
        },
      ],
      listLoading: false,
      // 图片预览
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=966242839,2938392410&fm=26&gp=0.jpg",
      ],
      // 显示隐藏
      xsdata: false,
    };
  },
  created() {},
  methods: {
    // 保存
    preservation() {},
    // 焦点离开分拣数量
    inputBlur(val, index, name) {
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(val.target.value)) &&
        val.target.value != ""
      ) {
        this.offset(index, name);
      } else {
        this.$nextTick(() => {
          if (val.target.offsetParent) {
            val.target.offsetParent.querySelector("input").focus();
          }
        });
      }
    },
    offset(index, name) {
      if (index < this.list.length) {
        this.$refs[name + (index += 1)].$el.offsetParent
          .querySelector("input")
          .focus();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainoc {
  .mainoc_jg {
    text-align: right;
    font-size: $font_14;
    color: $colour_18;
    margin-top: 20px;
    span {
      margin-left: 10px;
      color: $colour_red;
    }
  }
  .mainoc_xs {
    margin-top: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    i {
      font-size: 16px;
      color: $menuText;
      font-weight: bold;
      margin-left: 5px;
      &.on {
        transform: rotate(180deg);
      }
    }
    &:hover {
      cursor: pointer;
    }
  }
  .mainua_an {
    margin-top: 100px;
  }
}
</style>
